<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>龚</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="Description" content="龚" />
    <meta name="Keywords" content="龚" />
    <meta name="x5-orientation" content="portrait" />

    <link rel="stylesheet" href="./css/newVideo.css" />
    <link rel="stylesheet" href="./css/index.css?a" />
    <script src="./js/vue.js"></script>
    <!-- 引入vant样式文件和js文件 -->
    <link rel="stylesheet" href="./css/vant.css" />
    <script src="./js/vant.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="box1" v-if="boxFlag==1">
        <img src="./img/ming.jpg" alt="" />
        <p>答题器</p>
        <div @click="toBox(1)">题库一</div>
        <div @click="toBox(2)">题库二</div>
        <div @click="toBox(3)">题库三</div>
        <span @click="toRanking">排行榜</span>
      </div>
      <div class="box2" v-if="boxFlag==2">
        <div v-if="topicFlag==1">
          <div class="listBox" v-for="(item,index) in tableOne" :key="item.id">
            <p>{{item.id}}. {{item.name}}</p>
            <van-radio-group v-model="radioOne[index]">
              <van-radio
                v-for="el in item.select"
                :key="el.value"
                :name="el.value"
                >{{el.txt}}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div v-if="topicFlag==2">
          <div class="listBox" v-for="(item,index) in tableTwo" :key="item.id">
            <p>{{item.id}}. {{item.name}}</p>
            <van-radio-group v-model="radioTwo[index]">
              <van-radio
                v-for="el in item.select"
                :key="el.value"
                :name="el.value"
                >{{el.txt}}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div v-if="topicFlag==3">
          <div
            class="listBox"
            v-for="(item,index) in tableThree"
            :key="item.id"
          >
            <p>{{item.id}}. {{item.name}}</p>
            <van-radio-group v-model="radioThree[index]">
              <van-radio
                v-for="el in item.select"
                :key="el.value"
                :name="el.value"
                >{{el.txt}}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div class="btn" @click="radioFun">提交</div>
      </div>
      <div class="box3" v-if="boxFlag==3">
        <p>{{topicFlag==1?'题库一':(topicFlag==2?'题库二':'题库三')}}</p>
        <p>您的最终成绩为：</p>
        <p :style="nums>=80?'color: #2cc458;':'color: #e63f31;'">{{nums}}分</p>
        <div class="imgBox" v-if="nums>=80">
          <img src="./img/cheng1.png" alt="" />
          <img src="./img/cheng2.png" alt="" />
        </div>
        <div class="imgBox" v-else>
          <img src="./img/shi1.png" alt="" />
          <img src="./img/shi2.png" alt="" />
        </div>
      </div>
      <div class="box4" v-if="boxFlag==4">
        <span @click="returnFun"><</span>
        <p class="title">排行榜</p>
        <div>
          <span>一.</span>
          <img src="./img/cai.jpg" alt="" />
          <p>龚道鑫</p>
          <p>103分</p>
        </div>
        <div>
          <span>二.</span>
          <img src="./img/er.jpg" alt="" />
          <p>刘某</p>
          <p>102分</p>
        </div>
        <div>
          <span>三.</span>
          <img src="./img/san.jpg" alt="" />
          <p>张某</p>
          <p>101分</p>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      let app = new Vue({
        el: "#app",
        data: {
          boxFlag: 1,
          radioOne: ["", "", "", "", "", "", "", "", "", ""],
          radioOneYes: ["B", "C", "D", "A", "B", "D", "B", "B", "A", "D"],
          radioTwo: ["", "", "", "", "", "", "", "", "", ""],
          radioTwoYes: ["B", "C", "D", "A", "B", "D", "B", "B", "A", "D"],
          radioThree: ["", "", "", "", "", "", "", "", "", ""],
          radioThreeYes: ["A", "C", "D", "A", "B", "D", "B", "B", "A", "D"],
          nums: 0,
          topicFlag: 1,

          tableOne: [
            {
              id: 1,
              name: "1 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 2,
              name: "2 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 3,
              name: "3 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 4,
              name: "4 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 5,
              name: "5 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 6", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 6,
              name: "6 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 7", value: "D" },
              ],
            },
            {
              id: 7,
              name: "7 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 8", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 8,
              name: "8 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 9", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 9,
              name: "9 + 1 = ?",
              select: [
                { txt: "A : 10", value: "A" },
                { txt: "B : 1", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 10,
              name: "10 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 11", value: "D" },
              ],
            },
          ],
          tableTwo: [
            {
              id: 1,
              name: "2 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 3", value: "B" },
                { txt: "C : 5", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 2,
              name: "2 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 3,
              name: "3 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 4,
              name: "4 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 5,
              name: "5 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 6", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 6,
              name: "6 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 7", value: "D" },
              ],
            },
            {
              id: 7,
              name: "7 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 8", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 8,
              name: "8 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 9", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 9,
              name: "9 + 1 = ?",
              select: [
                { txt: "A : 10", value: "A" },
                { txt: "B : 1", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 10,
              name: "10 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 11", value: "D" },
              ],
            },
          ],
          tableThree: [
            {
              id: 1,
              name: "3 + 1 = ?",
              select: [
                { txt: "A : 4", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 1", value: "D" },
              ],
            },
            {
              id: 2,
              name: "2 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 3,
              name: "3 + 1 = ?",
              select: [
                { txt: "A : 1", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 4,
              name: "4 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 5,
              name: "5 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 6", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 6,
              name: "6 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 7", value: "D" },
              ],
            },
            {
              id: 7,
              name: "7 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 8", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 8,
              name: "8 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 9", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 9,
              name: "9 + 1 = ?",
              select: [
                { txt: "A : 10", value: "A" },
                { txt: "B : 1", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 4", value: "D" },
              ],
            },
            {
              id: 10,
              name: "10 + 1 = ?",
              select: [
                { txt: "A : 5", value: "A" },
                { txt: "B : 2", value: "B" },
                { txt: "C : 3", value: "C" },
                { txt: "D : 11", value: "D" },
              ],
            },
          ],
        },
        methods: {
          toBox(num) {
            this.boxFlag = 2;
            this.topicFlag = num;
          },
          radioFun() {
            this.nums = 0;
            let numFlag = true;
            if (this.topicFlag == 1) {
              this.radioOne.forEach((num, i) => {
                if (num == "") {
                  numFlag = false;
                  this.d(`您还有题目未完成！请仔细检查！`);
                }
                if (num == this.radioOneYes[i]) {
                  this.nums = this.nums + 10;
                }
              });
            } else if (this.topicFlag == 2) {
              this.radioTwo.forEach((num, i) => {
                if (num == "") {
                  numFlag = false;
                  this.d(`您还有题目未完成！请仔细检查！`);
                }
                if (num == this.radioTwoYes[i]) {
                  this.nums = this.nums + 10;
                }
              });
            } else if (this.topicFlag == 3) {
              this.radioThree.forEach((num, i) => {
                if (num == "") {
                  numFlag = false;
                  this.d(`您还有题目未完成！请仔细检查！`);
                }
                if (num == this.radioThreeYes[i]) {
                  this.nums = this.nums + 10;
                }
              });
            }
            if (numFlag == true) {
              this.boxFlag = 3;
            }
          },
          d(txt) {
            this.$dialog
              .alert({
                title: "提示",
                message: txt,
              })
              .then(() => {
                // on close
              });
          },
          returnFun() {
            this.boxFlag = 1;
          },
          toRanking() {
            this.boxFlag = 4;
          },
        },
        created: function () {},
      });
    </script>
  </body>
</html>
